<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>公告</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/okadmin.css">

</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>公告列表</legend>
</fieldset>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-row layui-col-space15" style="width: 80%;margin: 0 auto">
                <ul class="layui-timeline" id="notices">
                </ul>
                <div id="layPage" style="text-align: center"></div>
            </div>
        </div>
    </div>
</div>

<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>
<script>
    var showNotice;
    var limit=8;
    layui.use(['table','layer','laypage'], function () {
        var table = layui.table,
            $ = layui.$,
            form = layui.form,
            layer=layui.layer,
            laypage = layui.laypage;
        var noticeData;
        if(isEmpty(showNotice)) {
            showNotice = function (noticeId) {
                if(isEmpty(noticeData)){
                    layer.msg("公告获取失败,请重试");
                    return
                }
                var content="";
                var title="";
                for(d of noticeData){
                    if(d['noticeId']==noticeId){
                        content=d['content']
                        title=d['title']
                    }
                }
                var width = document.body.clientWidth / 2
                layer.open({
                    type: 1,
                    title:title||"标题获取异常,请刷新",
                    content: content||"公告获取失败,请刷新", //这里content是一个普通的String
                    area: [width.toString() + 'px', '500px'],
                    shadeClose: true,
                    maxmin: true
                })
            }
        }
        //第一次加载
        myAjax(mainUri+"/notice/selects",{page:1,limit: limit},function(d){
            if(d['code']==0){
                noticeData=d['data']
                for(da of d['data']){
                    $("#notices").append(getNoticeHtml(da))
                }
                laypage.render({
                    elem: 'layPage' //注意，这里的 test1 是 ID，不用加 # 号
                    , count: d['count'] //数据总数，从服务端得到
                    , limit: limit
                    , jump: function (obj, first) {
                        if (!first) {
                            setNoticesHtml(obj.curr)
                        }
                    }
                });
            }
        })

        function getNoticeHtml(d){
             var html='<li class="showNotice" style="margin-bottom: 20px;cursor:pointer;" onclick="showNotice(\''+d['noticeId']+'\')"><div class="layui-timeline-content layui-text">'+
                 '<h3 class="layui-timeline-title" style="overflow: hidden;-webkit-line-clamp:2;white-space: nowrap;text-overflow: ellipsis;height: 45px"><span>'+d['title']+'</span></h3>'+
                 '<p><span style="float: right;margin-right: 5%">'+d['createDate']+'</span></p></div></li><hr>'
            return html
        }
        function setNoticesHtml(page){
            myAjax(mainUri+"/notice/selects",{page:page,limit: limit},function(d){
                if(d['code']==0){
                    $("#notices").html('')
                    noticeData=d['data']
                    for(da of d['data']){
                        $("#notices").append(getNoticeHtml(da))
                    }
                }
            })
        }
    });
</script>
</body>
</html>
`